PlaywrightによるE2EテストでOTP(ワンタイムパスワード) MFAを通す

PlaywrightによるE2EテストでOTP(ワンタイムパスワード) MFAを通す

PlaywrightによるE2Eテストの実装において、OTP(ワンタイムパスワード) MFAを通す方法について書きました。Google Authenticatorを使っている場合の方法になります。
Clock Icon2024.07.16

情報システム室の進地@日比谷です。

PlaywrightでE2Eテストを行うときに、SaaSのMFAを通す必要がありました。本エントリーではOTP(ワンタイムパスワード) MFAをPlaywrightで通す方法について記述します。

必要なモジュールのインストール

Playwrightのプロジェクトルートディレクトリで totp-generator モジュールをインストールします。

$ npm i totp-generator

また、対象のOTP generatorのシークレットキーを環境変数で渡したいので、dotenvモジュールもインストールします。

$ npm i dotenv

OTP generatorのシークレットキーの取得(Google Authenticator使用)

Google Authenticatorを使っている場合、次の手順でシークレットキーを取得できます。

  1. Google Authenticatorのメニュー => [アカウントを移行] から取得したいOTP generator アカウントを選択して、QRコードをエクスポート
  2. 1でエクスポートしたQRコードをQRコードリーダで読み取り、次のようなURIを得る。
    a. otpauth-migration://offline?data=CjEKCkhlbGxvId6tvu8SGEV4YW1wbGU6YWxpY2VAZ29vZ2xlLmNvbRoHRXhhbXBsZTAC
  3. otpauth ツールに2-aで得たURIを渡して、シークレットキーを取得する。
    a. ~/go/bin/otpauth -link "otpauth-migration://offline?data=CjEKCkhlbGxvId6tvu8SGEV4YW1wbGU6YWxpY2VAZ29vZ2xlLmNvbRoHRXhhbXBsZTAC"
    b. 3-aの結果は次のようになる。 otpauth://totp/Example:[email protected]?issuer=Example&secret=JBSWY3DPEHPK3PXP このsecret=の後の値がシークレットキーになる

Playwrightのテストシナリオを記述する

.envファイルに取得したシークレットキーを

MFA_SECRET_KEY=JBSWY3DPEHPK3PXP

のように設定する。

その上で、テストシナリオをたとえば、 tests/sample.spec.ts に次のように記述する。

  import 'dotenv/config';
  import { TOTP } from "totp-generator";
  import { test, expect } from '@playwright/test';

  test.beforeEach(async ({ page }) => {
    // MFAを通す処理を記述
    const { otp } = await TOTP.generate(
      process.env.MFA_SECRET_KEY
    );
    // otpにワンタイムパスワードが入っているので画面に入力する
    await page.locator("#some-input").fill(otp);
    // 以後、フォームを送信したり必要な処理をする
  }

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.